<template>
  <div>
    <q-btn flat dense round color="grey-8" icon="more_vert">
      <q-menu>
        <q-list link class="text-grey-8" style="min-width: 160px">
          <template v-for="item in menu">
            <q-item v-if="getVisible(item, instance)"
              :key="item.name"
              clickable
              class="size-14"
              v-close-popup
              :separator="item.separator"
              @click.native="item.action(instance)"
            >
              <q-item-section class="col">{{ item.name }}</q-item-section>
              <q-item-section side>
                <q-icon v-if="item.icon" class="size-18" :name="item.icon"/>
              </q-item-section>
            </q-item>
          </template>
        </q-list>
      </q-menu>
    </q-btn>
  </div>
</template>

<script>
  export default {
    name: 'aPopoverMenu',
    props: {
      menu: Array,
      instance: Object
    },
    data () {
      return {}
    },
    computed: {},
    watch: {},
    methods: {
      getVisible (item, instance) {
        const visible = item.visible

        if (visible === undefined) {
          return true
        }

        if (visible instanceof Function) {
          return visible(instance)
        }

        return !!visible
      }
    }
  }
</script>

<style lang="stylus">
</style>
